@tailwind base;
@tailwind components;
@tailwind utilities;

/* Basic Reset */
body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* Tailwind will provide background/color, so these can be removed or overridden */
  /* background-color: #f4f4f4; */
  /* color: #333; */
}

#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* Prevent scrollbars on body if content fits */
}

:root {
  --auto-context-button-bg: none;
}

.auto-context-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem; /* ~px-3 py-1 */
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color 120ms ease-out,
    opacity 120ms ease-out;
}

.auto-context-button--enabled {
  color: #ffffff;
  border-width: 0;
  background-image: var(--auto-context-button-bg);
  background-size: 2000px 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: auto-context-spin 20s linear infinite;
}

.auto-context-button--in-progress {
  color: #ffffff;
  border-width: 0;
  border-color: transparent;
  background-image: var(--auto-context-button-bg);
  background-size: 2000px 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: auto-context-spin 1s linear infinite;
  cursor: wait;
  opacity: 1;
}

@keyframes auto-context-spin {
  from { background-position-x: 0px; }
  to { background-position-x: -2000px; }
}

.auto-context-button--enabled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.18),
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.18)
  );
  pointer-events: none;
}

.auto-context-button--enabled span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.auto-context-button--disabled,
.auto-context-button:disabled {
  color: #9ca3af; /* gray-400 */
  border-color: #d1d5db; /* gray-300 */
  background-color: #f3f4f6; /* gray-100 */
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.85;
}

/* Remove button and input styles, Tailwind will handle them */
/* Default browser styles for buttons, inputs, textareas will be reset by Tailwind's preflight */
/* Customizations should be done with Tailwind classes or specific component styles */


